<link rel="stylesheet" href="/CSS/editEncyclopedia.css">

<style>
    .table .name {
        background-color: #fff;
        width: 120px;
    }

    .layui-laydate .layui-this {
        background-color: #1E9FFF !important;
        color: #fff !important;
    }

    .tableWidth {
        width: 450px;
    }

    .container {
        width: 1100px;
    }

    .bottomform input {
        margin-left: 10px;
        width: 285px;
    }

    .textbox {
        text-align: left;
    }
</style>

<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;text-align: center;">
        <legend><i class="fa fa-file-text-o"></i> 专 题 集</legend>
        <span style="color:rgb(172, 168, 168);"> 注意：表格中带<span style="color: red;">*</span>为必填项</span>
    </fieldset>

    <div class="container">
        <form class="layui-form">
            <!-- 表单 -->
            <ul class="table flex-c-j">
                <li class="top flex">
                    <!-- 左侧输入框 -->
                    <ul class="form flex-column-s">
                        <!-- 上 -->
                        <li class="one">
                            <span class="name">名称<span style="color: red;">*</span>：</span>
                            <div class="textbox">
                                <input type="text" name="name" autocomplete="off" class="layui-input"
                                    style="height:34px;width:735px;margin-left: 10px;" lay-verify="required"
                                    lay-reqText="专题集名称不能为空！" placeholder="请输入名称">
                            </div>
                        </li>
                        <!-- 下 -->
                        <li class="bottomform">
                            <!-- 左边 -->
                            <ul>
                                <li class="tableWidth">
                                    <span class="name">主办单位：</span>
                                    <div class="textbox">
                                        <input name="hostInstitution" id="" class="borderNone" type="text" style="width:260px;"
                                            placeholder="请输入主办单位">
                                    </div>
                                </li>

                                <li class="tableWidth">
                                    <span class="name">承办单位：</span>
                                    <div class="textbox">
                                        <input name="undertakeInstitution" id="" class="borderNone" type="text"style="width:260px;"
                                            placeholder="请输入承办单位">
                                    </div>
                                </li>

                                <li class="tableWidth">
                                    <span class="name">时间：</span>
                                    <div class="textbox">
                                        <input type="text" name="time" placeholder="请选择举办时间" autocomplete="off"
                                            class="layui-input date" style="height:34px;width:285px;margin-left: 10px;">
                                    </div>
                                </li>
                            </ul>
                            <!-- 右边 -->
                            <ul>
                                <li class="tableWidth">
                                    <span class="name">协办单位：</span>
                                    <div class="textbox">
                                        <input name="jointlyInstitution" id="" class="borderNone" type="text" style="width:260px;"
                                            placeholder="请输入协办单位">
                                    </div>
                                </li>
                                <li class="tableWidth">
                                    <span class="name">举办地点：</span>
                                    <div class="textbox">
                                        <input name="place" id="" class="borderNone" type="text" style="width:260px;" placeholder="请输入举办地点">
                                    </div>
                                </li>

                                <li class="tableWidth">
                                    <span class="name" style="border-right: 0px;border-left: 0px;"></span>
                                    <div class="textbox"></div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <!-- 封面 -->
                    <div class="poster flex-c-a" style="height: 195px;">
                        <img class="layui-upload-img" style="height: 150px;width: 130px;margin-top: 10px;" id="coverImg">
                        <div id="outerdiv"
                            style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);width:100%;height:100%;display:none;">
                            <div id="innerdiv" style="position:absolute;">
                                <img id="bigimg" style="border:1px solid #fff;">
                            </div>
                        </div>
                        <button type="button" id="coverUpload" class="layui-icon">上传封面</button>
                    </div>
                </li>
                <!-- 简介 -->
                <li class="one" style="display: flex;justify-content: center;">
                    <span class="name big">简介：</span>
                    <div class="textbox">
                        <textarea name="introduction" id="" class="borderNone textcontent" style="width: 940px;margin-left: 10px;height:100px"
                            placeholder="请输入简介"></textarea>
                    </div>
                </li>

            </ul>
            <button class="layui-btn" lay-submit="" lay-filter="save"
                style="margin-top:20px;background-color: #FFB800;font-size: 14px;color: #ffffff;border-radius: 5px;margin-left: 900px;margin-bottom: 20px;">立即提交</button>
            <button class="layui-btn" onclick="fn_Close();" type="button"
                style="margin-top:20px;background-color: #cccccc;font-size: 14px;color: #ffffff;border-radius: 5px;margin-bottom: 20px;">取消提交</button>

            <div hidden>
                <input type="text" name="id">
                <input type="text" name="sysID">
                <input type="text" name="cover">
                <input type="text" name="newCover" id="newCover">
            </div>
        </form>
    </div>
    <script>
        $(function () {
            $("#coverImg").click(function () {
                var _this = $(this);//将当前的pimg元素作为_this传入函数
                imgShow($(this));
            });
        });

        //图片放大
        function imgShow(_this) {
            var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
            $("#bigimg").attr("src", src);//设置#bigimg元素的src属性
            /*获取当前点击图片的真实大小，并显示弹出层及大图*/
            $("<img/>").attr("src", src).load(function () {
                var windowW = $(window).width();//获取当前窗口宽度
                var windowH = $(window).height();//获取当前窗口高度
                var imgWidth, imgHeight;
                $("#bigimg").css("width", this.width);//以最终的宽度对图片缩放
                $("#bigimg").css("height", this.height);//以最终的宽度对图片缩放
                var w = (windowW - this.width) / 2;//计算图片与窗口左边距
                var h = (windowH - this.height) / 2;//计算图片与窗口上边距
                $("#innerdiv").css({ "top": h, "left": w });//设置#innerdiv的top和left属性
                $("#outerdiv").fadeIn("fast");//淡入显示#outerdiv及.pimg
            });
            $("#outerdiv").click(function () {//再次点击淡出消失弹出层
                $(this).fadeOut("fast");
            });
        }

        //编辑页面
        $(function () {
            // 编辑
            if (parent.opreatType == "edit") {
                var parent_json = parent.editData;
                console.log(parent_json)
                $("input[name='id']").val(parent_json.id)
                $("input[name='sysID']").val(parent_json.sysID)
                $("input[name='name']").val(parent_json.name)
                $("input[name='hostInstitution']").val(parent_json.hostInstitution)
                $("input[name='undertakeInstitution']").val(parent_json.undertakeInstitution)
                $("input[name='jointlyInstitution']").val(parent_json.jointlyInstitution)
                $("input[name='time']").val(parent_json.time)
                $("input[name='place']").val(parent_json.place)
                $("textarea[name='introduction']").val(parent_json.introduction)
                $("input[name='createTime']").val(parent_json.createTime)
                $("input[name='updateTime']").val(parent_json.updateTime)
                if ("" != parent_json.cover) {
                    shared.ajaxGet("/adminTechnicalBag/getImage", { cover: parent_json.cover, type: 'edit' }, function (result) {
                        $('#coverImg').attr('src', 'data:image/jpeg;base64,' + result);
                    });
                } else {
                   // -------------------------------------------------------------封面默认-----------------------------------
                    var image = "";
                    for (var i = 0; i < config.imgList.length; i++) {
                        if (parent_json.area == config.imgList[i]['key']) {
                            image = config.imgList[i]['default']
                        }
                    }
                    $('#coverImg').attr('src', image);
                }

            }
        })

        //渲染页面
        layui.form.render();

        //渲染日期插件
        lay('.date').each(function () {
            layui.laydate.render({
                elem: this,//元素
            });
        });

        //图片上传
        layui.upload.render({
            headers: { token: shared.getCookie('token') },
            elem: '#coverUpload'
            , url: config.server + '/adminCG/imageTempUpload'
            , before: function (obj) {
                obj.preview(function (index, file, result) { //预读本地文件示例，不支持ie8
                    $('#coverImg').attr('src', result);
                });
            }
            , size: 30000//设置文件最大可允许上传的大小，单位 KB。不支持ie8/9
            , done: function (res) {
                if (res.code == 200) {
                    layer.msg('上传成功');
                    if (parent.opreatType == "edit") {
                        $("input[name='newCover']").val(res.data)
                    } else {
                        $("input[name='cover']").val(res.data)
                    }
                } else {
                    layer.msg('上传失败,' + res.msg);
                }
            }
        });
        

        //监听提交操作
        layui.form.on('submit(save)', function (data) {
            if (parent.opreatType == "add") {
                console.log(data.field)
                layer.confirm('确定保存当前页面吗？', function (index) {
                    shared.ajaxPost('/adminTechnicalBag/insertZTJ', data.field, function (res) {
                        layer.closeAll();
                    }, { async: false })
                    parent.tableRender(parent.tableBar, parent.collectParams())
                    layer.close(index);
                });
            } else {
                layer.confirm('确定保存当前页面吗？', function (index) {
                    console.log(data.field)
                    shared.ajaxPost('/adminTechnicalBag/updateZTJ', data.field, function (res) {
                        layer.closeAll();
                    }, { async: false })
                    parent.tableRender(parent.tableBar, parent.collectParams())
                    layer.close(index);
                });
            }
            return false;
        })

        /** 设置关闭按钮的click事件处理 */
        function fn_Close() {
            layer.confirm('确定取消保存当前页面吗？', function (index) {
                layer.closeAll();
            });
        }



    </script>
</body>

</html>